<script setup lang="ts" name="FieldsAddEdit">
const { t } = useI18n() // 国际化
const AddEditFormRef: any = ref(null)

const emit = defineEmits(['save'])

const visible = ref(false)
const title = ref('')
const formData = ref({
  name: '',
  fieldType: '',
  string: '',
  expression: ''
})
const rules = ref({
  name: { required: true, message: '字段名称不能为空', trigger: ['blur', 'change'] },
  fieldType: { required: true, message: '字段类型不能为空', trigger: ['blur', 'change'] },
  string: { required: true, message: '字段值不能为空', trigger: ['blur', 'change'] },
  expression: { required: true, message: '表达式不能为空', trigger: ['blur', 'change'] }
})

const fieldTypeList = ref([
  { label: '字符串', value: 'string' },
  { label: '表达式', value: 'expression' }
])

// 显示新建/编辑部门弹窗
const showDialog = (v) => {
  visible.value = true
  if (v) {
    title.value = '编辑字段'
    formData.value.name = v.name
    formData.value.fieldType = v.fieldType
    if (v.fieldType === 'string') {
      formData.value.string = v.string
    } else {
      formData.value.expression = v.expression
    }
  } else {
    title.value = '添加字段'
  }
}
// 子组件将方法暴露给父组件
defineExpose({ showDialog })
const closeDialog = () => {
  AddEditFormRef.value.resetFields()
  visible.value = false
}

const handleOk = () => {
  if (!AddEditFormRef.value) return false
  AddEditFormRef.value.validate((valid) => {
    if (valid) {
      const result: any = {}
      result.name = formData.value.name
      result.fieldType = formData.value.fieldType
      if (result.fieldType === 'string') {
        result.string = formData.value.string
      } else {
        result.expression = formData.value.expression
      }
      emit('save', result)
      closeDialog()
    }
  })
}
</script>

<template>
  <el-dialog v-model="visible" width="600px" append-to-body destroy-on-close :title="title">
    <el-form ref="AddEditFormRef" label-width="auto" label-position="right" :model="formData" :rules="rules">
      <ElFormItem label="字段名称" prop="name">
        <el-input v-model="formData.name" clearable placeholder="请输入字段名称" />
      </ElFormItem>
      <ElFormItem label="字段类型" prop="fieldType">
        <ElSelect v-model="formData.fieldType">
          <ElOption v-for="item in fieldTypeList" :key="item.value" :label="item.label" :value="item.value" />
        </ElSelect>
      </ElFormItem>
      <ElFormItem v-if="formData.fieldType === 'string'" label="字段值" prop="string">
        <el-input v-model="formData.string" type="textarea" clearable placeholder="请输入字段值" />
      </ElFormItem>
      <ElFormItem v-if="formData.fieldType === 'expression'" label="表达式" prop="expression">
        <el-input v-model="formData.expression" type="textarea" clearable placeholder="请输入表达式" />
      </ElFormItem>
    </el-form>
    <template #footer>
      <span ref="modalFooter" class="modal-footer">
        <el-button @click="closeDialog">{{ t('action', 'cancel') }}</el-button>
        <el-button type="primary" @click="handleOk">{{ t('action', 'confirm') }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
.el-form {
  padding: 40px 80px;
}

.modal-footer {
  display: inline-flex;
  overflow: hidden;
}
</style>
